<template>
  <header class="header-trade-top">
    <div class="header-trade-btn-back" @click.stop.prevent="back"><i class="iconfont icon-fanhui"></i></div>
    <div class="header-trade-title">
      <div class="title" :class="{'active':tabIndex==index}" v-for="(item,index) in tabs" @click.stop.prevent="clickTab(index)">
        <span class="title-text">{{item.title}}</span>
      </div>
    </div>
  </header>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  export default {
    data(){
      return {
        tabIndex:0,//0:股票 1:基金 2:两融 3:比赛
        tabs:[
          {title:'股票',path:'/stockmain'},
          {title:'基金',path:'/fundmain'},
          {title:'两融',path:'/financialmain'},
          {title:'比赛',path:'/gamemain'}
        ]
      }
    },
    props: {
      tab:{ //0:股票 1:基金 2:两融 3:比赛
        type:Number,
        default:0
      }
    },
    created:function(){
      this.tabIndex = this.tab;
    },
    methods:{
      clickTab(index){
        let kv = {"usercode": LocalDAO.getUserCode()}
        let eventId = ''
        switch (Number(index)) {
          case 0 : eventId = ''; break;
          case 1 : eventId = '20016'; break;
          case 2 : eventId = '21014'; break;
          case 3 : eventId = '21015'; break;
        }
        if (eventId !== '') {
          TDAPP.onEvent(eventId,"",kv)
          TDAPP.send()
        }
        if (typeof (this.$route.query.cleanStorage) !== 'undefined') {
          this.$router.replace({path:this.tabs[index].path, query:{cleanStorage: this.$route.query.cleanStorage}})
        } else {
          this.$router.replace({path:this.tabs[index].path})
        }
      },
      back(){
//        window.location.href = 'gtjanormal://goback'
        if( typeof (this.$route.query.cleanStorage)!== 'undefined') {
         window.location.href = 'gtjanormal://goback'
        }else{
          this.$router.go(-1)
        }
      }
    }
  }
</script>

<style scoped>
  .header-trade-top{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 44px;
    color: #fff;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
  }
  .header-trade-top i {
    font-size: 20px;
    line-height: 36px;
  }
  .header-trade-btn-back{
    position: absolute;
    line-height: 32px;
    font-size: 20px;
    width: 36px;
    height: 36px;
    text-align: center;
    border-radius: 50%;
    margin-top: 4px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .header-trade-title{
     width:260px;
     height: 30px;
     line-height: 30px;
     margin:7px auto;
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
  }
  .title{
    height:30px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    float: left;
    font-size: 16px;
    color: #FFFFFF;
    margin-right:6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title.active{
    border-radius: 20px;
    background: #FFFFFF;
  }
  .header-trade-title .title:nth-child(4){
    margin-right:0
  }

  .stock-main .header-trade-top{
    background-color: RGBA(124,15,15,0.3)
  }
  .stock-main .header-trade-btn-back{
    border: 1px solid #FF5B5B;
    background-color:RGBA(43,4,4,0.3)
  }
  .stock-main .header-trade-title{
    background-color:RGBA(43,4,4,0.3);
    border: 1px solid #FF5B5B;
  }
  .stock-main .title.active{
    color: #E52929;
  }

  .fund-main .header-trade-top{
    background-color: rgba(15,61,144,0.3);
  }
  .fund-main .header-trade-btn-back{
    border: 1px solid #A4E3FF;
    background-color:RGBA(48,71,187,0.6)
  }
  .fund-main .header-trade-title{
    background-color:RGBA(48,71,187,0.6);
    border: 1px solid #6D92D7;
  }
  .fund-main .title.active{
    color: #2E55C6;
  }

  .game-main .header-trade-top{
    background-color: rgba(141,34,2,0.3);
  }
  .game-main .header-trade-btn-back{
    border: 1px solid #FFBC80;
    background-color:#d13200
  }
  .game-main .header-trade-title{
    background-color:rgba(209,50,0,0.6);
    border: 1px solid #FFBC80;
  }
  .game-main .title.active{
    color: #F83900;
  }

  .financial-main .header-trade-top{
    background-color: rgba(66,5,132,0.3);
    background-image: url('~assets/images/trade/shuiyin_jy.png');
    background-size: contain;
    background-position: 95%;
    background-repeat: no-repeat;
  }
  .financial-main .header-trade-btn-back{
    border: 1px solid #C28DFC;
    background-color:#6019AE;
  }
  .financial-main .header-trade-title{
    background-color:rgb(90,12,176);
    border: 1px solid #C28DFC;
  }
  .financial-main .title.active{
    color: #6019AE;
  }

  @media (max-width: 350px) {
    .header-trade-title{
      margin-left:47px
    }
  }

</style>
